[Windowsストアアプリ開発]画面遷移するサンプルの作成

Windowsストアアプリ開発

#Windowsストアアプリ

#RIA

#Windows

T君

2012.11.19

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Windowsストアアプリで画面遷移する簡単なサンプルを作ってみました。

実装する

まずはプロジェクトを作成します。Visual C#で「新しいアプリケーション」を選択しました。

プロジェクト作成できたら、遷移先のページを追加します。
右クリックして「新しい項目」を選択します。

「新しい項目の追加」という画面になるので、「基本ページ」を選択して追加ボタンをクリックします。
名前は NextPage.xaml にしました。このページが遷移先のページになります。

不足しているファイルを自動的に追加するか聞かれるので「はい」を選択します。
Commonフォルダの中にいくつかファイルが出力されていると思います。

次にMainPage.xamlを開いて以下の画像のようにTextBoxとButtonを配置します。TextBoxの名前は "MyTextBox" にしました。デザイン上のButtonをダブルクリックしてクリック時の処理を実装します。

FrameプロパティのNavigateメソッドを呼び出します。
第1引数に遷移先ページのクラス名、第2引数に遷移先の画面に渡したいパラメータを設定します。ここではTextBoxの中身を渡しています。

private void Button_Click_1(object sender, RoutedEventArgs e)
{
	this.Frame.Navigate(typeof(NextPage), MyTextBox.Text);
}

続いてNextPage.xaml.csを開いて、LoadStateメソッドを実装します。
LoadStateの第1引数がMainPageから渡されたパラメータです。

protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
{
	pageTitle.Text = (string)navigationParameter;
}

実装できたので動作確認してみます。TextBoxに文字列を入力してからボタンを押下します。遷移先のページのタイトルがTextBoxに入力した文字列になっていると思います。
ページを作成するときに「基本ページ」を選択すると、最初からタイトル部分とBackボタンが実装されており、戻るページがある場合のみBackボタンを表示されます。Backボタンを押下するとMainPageに戻ります。

前の画面を残しておく

Backボタンを押して、MainPageに戻るとTextBoxの文字列が空になっていると思います。
これは新しくページのインスタンスを生成しなおしているためです。状態を保持しておきたい場合は遷移元のページ(ここではMainPage)のNavigationCacheModeプロパティをDisabledに変更します。
ドキュメントアウトラインでPageを選択しすると、プロパティウインドウで設定できます。